<template>
  <div id="mewsScoreChart">
    <div class="clearfix">
      <div class="link-list center-block pull-left">
        <router-link
          v-for="(item,index) in list"
          :key="item.value"
          :to="{path:item.path,query:{item:7,ind:1,ins:index}}"
          :class="{'router-link-exact-active':ins == index}"
          @click.native="changeBgc(index)"
        >{{item.label}}</router-link>
      </div>
      <button class="pull-right" @click="addListData">新增</button>
    </div>
    <div class="mewsScoreChartContent">
      <lineEcharts v-if="listData.length" class="line" :name="'MEWS评分趋势图'" :items="listData"></lineEcharts>
      <modal id="addMews" ref="alert" :title="'新增MEWS评分'" :sureBtn="addScore" :btnSave="'保存'">
        <div class="headerMod clearfix">
          <p class="pull-left">
            总分 :
            <span class="red" style="font-size:16px;">{{MewsScore}}</span>
          </p>
          <vue-datepicker-local
            v-model="emptyTime"
            class="pull-left"
            clearable
            @clear="clear"
            :placeholder="'请选择时间'"
          />
          <div class="pull-left">
            <div
              class="select"
              v-clickoutside="handleCloseDate"
              style="width:100px;margin-left:10px;height:36px;"
            >
              <p :class="{'up' : isShowDate}" @click="showDate">{{date}}</p>
              <ul :class="['list-link',{'show': isShowDate}]" style="width:100px;">
                <li
                  v-for="(item,index) in dateTab"
                  :key="item.value"
                  @click="changeDate($event)"
                >{{item.label}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="content clearfix newConent">
          <div class="pull-left">
            <label>收缩压 :</label>
            <input type="number" v-model="addData.SystolicPressure" />
            <span class="red">{{SystolicPressureScore}}</span>
            <br />
            <span
              style="display: inline-block;margin-top: 8px;margin-left: 50px;color: #999;"
              v-if="addData.SystolicPressureDate != ''"
            >{{addData.SystolicPressureDate |filterDates}}</span>
          </div>
          <div class="pull-left">
            <label>心 率 :</label>
            <input type="number" v-model="addData.HeartRate" />
            <span class="red">{{HeartRateScore}}</span>
            <br />
            <span
              style="display: inline-block;margin-top: 8px;margin-left: 50px;color: #999;"
              v-if="addData.HeartRateDate != ''"
            >{{addData.HeartRateDate|filterDates}}</span>
          </div>
          <div class="pull-left">
            <label>呼 吸 :</label>
            <input type="number" v-model="addData.RespiratoryFrequency" />
            <span class="red">{{RespiratoryFrequencyScore}}</span>
            <br />
            <span
              style="display: inline-block;margin-top: 8px;margin-left: 50px;color: #999;"
              v-if="addData.RespiratoryFrequencyDate !=''"
            >{{addData.RespiratoryFrequencyDate |filterDates}}</span>
          </div>
          <div class="pull-left">
            <label>体 温℃:</label>
            <input type="number" v-model="addData.Temperature" />
            <span class="red">{{TemperatureScore}}</span>
            <br />
            <span
              style="display: inline-block;margin-top: 8px;margin-left: 50px;color: #999;"
              v-if="addData.TemperatureDate != ''"
            >{{addData.TemperatureDate |filterDates}}</span>
          </div>
          <div class="pull-left">
            <label style="margin-top:5px;">意 识 :</label>
            <div class="select" v-clickoutside="handleClose">
              <p :class="{'up' : isShowShift}" @click="showShift">{{shift}}</p>
              <ul :class="['list-link',{'show': isShowShift}]">
                <li
                  v-for="(item,index) in tab"
                  :key="item.value"
                  @click="changeShift($event)"
                >{{item.label}}</li>
              </ul>
            </div>
            <span style="margin-left:170px;" class="red">{{addData.Neuro}}</span>
          </div>
        </div>
      </modal>
      <loading v-if="isShow && listData.length== 0"></loading>
      <noSearch v-if="!isShow && listData.length == 0"></noSearch>
    </div>
  </div>
</template>
<script>
import { standardDate } from "@/components/common/date"; //引入时间转换JS
import { formatDate } from "@/components/common/date"; //引入时间转换JS
import lineEcharts from "@/components/echarts/lineEcharts";
import modal from "@/components/modal/modal";
import loading from "@/components/loading/loading";
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
import VueDatepickerLocal from "@/components/datepicker/VueDatepickerLocal";
import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
import {
  apiAddOrUpdatePatientMewsScore,
  apiGetMewsScoreListByTime,
  apiGetVisit
} from "@/api/api";
export default {
  data() {
    return {
      list: [
        { path: "/scorePage/mewsScoreChart", label: "MEWS评分图" },
        { path: "/scorePage/mewsScoreSurface", label: "MEWS评分表" }
      ],
      isShowShift: false,
      shift: "清楚(警觉)",
      tab: [
        { label: "清楚(警觉)", value: 0 },
        { label: "对声音有反应", value: 1 },
        { label: "对疼痛有反应", value: 2 },
        { label: "无反应", value: 3 }
      ],
      isShowDate: false,
      date: "02:00",
      dateTab: [
        { label: "02:00", value: 0 },
        { label: "10:00", value: 1 },
        { label: "18:00", value: 2 }
      ],
      emptyTime: standardDate(new Date()),
      isShow: true,
      ins: 0,
      listData: [],
      ScoreTime: standardDate(new Date()),
      addData: {
        HeartRate: "", //心率
        SystolicPressure: "", // 收缩压
        RespiratoryFrequency: "", // 呼吸频率
        Temperature: "", // 温度
        Neuro: 0, // 神经（意识）
        HeartRateDate: "",
        SystolicPressureDate: "",
        RespiratoryFrequencyDate: "",
        TemperatureDate: "",
        ScoreTime: standardDate(new Date()) + " " + "02:00",
        PateintVisitId: this.$store.getters.ID,
        Doctor_Name: JSON.parse(sessionStorage.getItem("user")).Name
      }
    };
  },
  computed: {
    HeartRateScore: function() {
      //心率评分
      if (this.addData.HeartRate <= 40 && this.addData.HeartRate != "") {
        return 2;
      } else if (this.addData.HeartRate >= 41 && this.addData.HeartRate <= 50) {
        return 1;
      } else if (
        this.addData.HeartRate >= 51 &&
        this.addData.HeartRate <= 100
      ) {
        return 0;
      } else if (
        this.addData.HeartRate >= 101 &&
        this.addData.HeartRate <= 110
      ) {
        return 1;
      } else if (
        this.addData.HeartRate >= 111 &&
        this.addData.HeartRate <= 129
      ) {
        return 2;
      } else if (this.addData.HeartRate >= 130) {
        return 3;
      } else if (this.addData.HeartRate == "") {
        return 0;
      }
    },
    SystolicPressureScore: function() {
      //收缩压评分
      if (
        this.addData.SystolicPressure < 70 &&
        this.addData.SystolicPressure != ""
      )
        return 3;
      else if (
        this.addData.SystolicPressure >= 70 &&
        this.addData.SystolicPressure <= 80
      )
        return 2;
      else if (
        this.addData.SystolicPressure >= 81 &&
        this.addData.SystolicPressure <= 100
      )
        return 1;
      else if (
        this.addData.SystolicPressure >= 101 &&
        this.addData.SystolicPressure <= 199
      )
        return 0;
      else if (this.addData.SystolicPressure >= 200) return 2;
      else return 0;
    },
    RespiratoryFrequencyScore: function() {
      //呼吸评分
      if (
        this.addData.RespiratoryFrequency < 9 &&
        this.addData.RespiratoryFrequency != ""
      )
        return 2;
      else if (
        this.addData.RespiratoryFrequency >= 9 &&
        this.addData.RespiratoryFrequency <= 14
      )
        return 0;
      else if (
        this.addData.RespiratoryFrequency >= 15 &&
        this.addData.RespiratoryFrequency <= 20
      )
        return 1;
      else if (
        this.addData.RespiratoryFrequency >= 21 &&
        this.addData.RespiratoryFrequency <= 29
      )
        return 2;
      else if (this.addData.RespiratoryFrequency >= 30) return 3;
      else return 0;
    },
    TemperatureScore: function() {
      //体温评分
      if (this.addData.Temperature < 35 && this.addData.Temperature != "")
        return 2;
      else if (
        this.addData.Temperature >= 35 &&
        this.addData.Temperature <= 38.4
      )
        return 0;
      else if (this.addData.Temperature > 38.4) return 2;
      else return 0;
    },
    MewsScore: function() {
      //总分
      return (
        this.TemperatureScore +
        this.RespiratoryFrequencyScore +
        this.SystolicPressureScore +
        this.HeartRateScore +
        this.addData.Neuro
      );
    }
  },
  watch: {
    ScoreTime: {
      handler(curVal, oldVal) {
        if (this.ScoreTime == "") {
          this.addData.ScoreTime = "";
          this.addListData();
        } else {
          this.addData.ScoreTime = this.ScoreTime + " " + this.date;
          this.addListData();
        }
      }
    },
    date: {
      handler(curVal, oldVal) {
        this.addData.ScoreTime = this.ScoreTime + " " + this.date;
        this.addListData();
      }
    },
    shift: {
      handler(curVal, oldVal) {
        //console.log(curVal == 'A 班')  //新值
        //this.$store.state.stateData.status = 2;
        if (this.shift == "清楚(警觉)") {
          //console.log(this.shift);
          this.addData.Neuro = 0;
        } else if (this.shift == "对声音有反应") {
          //console.log(this.shift);
          this.addData.Neuro = 1;
        } else if (this.shift == "对疼痛有反应") {
          this.addData.Neuro = 2;
        } else if ((this.shift = "无反应")) {
          //console.log(this.shift);
          this.addData.Neuro = 3;
        }
      }
    }
  },
  created() {
    this.GetMewsScoreByTime();
  },
  mounted() {
    if (this.$route.query.ins) {
      this.ins = this.$route.query.ins;
    } else {
      this.ins = 0;
    }
    Bus.$on("timePicker", e => {
      this.ScoreTime = e.trim();
    });
  },
  methods: {
    handleClose() {
      this.isShowShift = false;
    },
    showShift() {
      this.isShowShift = !this.isShowShift;
    },
    changeShift(event) {
      this.isShowShift = false;
      if ($.trim(event.currentTarget.innerHTML) != this.shift) {
        // 当选择的值跟当前的值不一样时
        this.shift = $.trim(event.currentTarget.innerHTML); //赋值
      }
    },
    handleCloseDate() {
      this.isShowDate = false;
    },
    showDate() {
      this.isShowDate = !this.isShowDate;
    },
    changeDate(event) {
      this.isShowDate = false;
      if ($.trim(event.currentTarget.innerHTML) != this.date) {
        // 当选择的值跟当前的值不一样时
        this.date = $.trim(event.currentTarget.innerHTML); //赋值
      }
    },
    changeBgc(index) {
      this.ins = index;
    },
    clear() {
      this.emptyTime = [];
    },
    addListData() {
      //console.log('新增');
      apiGetVisit({
        PatientID: this.$store.getters.ID,
        date: this.addData.ScoreTime
      })
        .then(res => {
          if (JSON.parse(res).ResultCode == 1) {
            //console.log(JSON.parse(res));
            if (JSON.parse(res).ObjectData.length != 0) {
              for (let item of JSON.parse(res).ObjectData) {
                if (item.Name == "体温") {
                  this.addData.Temperature = item.Values;
                  this.addData.TemperatureDate = item.PER_Time;
                }
                if (item.Name == "自主呼吸频率") {
                  this.addData.RespiratoryFrequency = item.Values;
                  this.addData.RespiratoryFrequencyDate = item.PER_Time;
                }
                if (item.Name == "心率") {
                  this.addData.HeartRate = item.Values;
                  this.addData.HeartRateDate = item.PER_Time;
                }
                if (item.Name == "无创收缩压") {
                  this.addData.SystolicPressure = item.Values;
                  this.addData.SystolicPressureDate = item.PER_Time;
                }
                //console.log(item);
              }
            } else {
              this.addData.Temperature = "";
              this.addData.RespiratoryFrequency = "";
              this.addData.HeartRate = "";
              this.addData.SystolicPressure = "";
              this.addData.TemperatureDate = "";
              this.addData.RespiratoryFrequencyDate = "";
              this.addData.HeartRateDate = "";
              this.addData.SystolicPressureDate = "";
            }
            //this.emptyTime = standardDate(new Date());
            //this.ScoreTime = standardDate(new Date());
            this.$refs.alert.show();
          } else {
            //console.log(res)
            this.$toast.center(JSON.parse(res).Message);
          }
        })
        .catch(err => {
          this.$toast.center("当前请求有问题，请联系管理员！");
        });
    },
    GetMewsScoreByTime() {
      apiGetMewsScoreListByTime({
        visitID: this.$store.getters.ID
      })
        .then(res => {
          if (res.ResultCode == 1) {
            this.listData = [];
            if (res.ListResult.length == 0) {
              this.isShow = false;
            } else {
              this.isShow = true;
              for (let item of res.ListResult) {
                //console.log(item)
                this.listData.push({
                  date: this.formatDate(item.ScoreTime),
                  value: item.MewsScore
                });
              }
            }

            //console.log(res);
          } else {
            this.isShow = false;
            this.listData = [];
          }
        })
        .catch(err => {
          this.$toast.center("当前请求有问题，请联系管理员！");
        });
    },
    addScore() {
      if (this.ScoreTime == "") {
        this.$toast.center("请选择时间！！！");
        setTimeout(() => {
          this.$refs.alert.show();
        }, 2500);
      } else if (
        this.addData.Temperature == "" ||
        this.addData.RespiratoryFrequency == "" ||
        this.addData.HeartRate == "" ||
        this.addData.SystolicPressure == ""
      ) {
        this.$toast.center("评分数据不能为空！！！");
        setTimeout(() => {
          this.$refs.alert.show();
        }, 2500);
      } else {
        this.addData.ScoreTime = this.ScoreTime + " " + this.date;
        //console.log(this.addData)
        apiAddOrUpdatePatientMewsScore({
          mewsScoreJson: JSON.stringify(this.addData)
        })
          .then(res => {
            if (res.ResultCode == 1) {
              this.isShow = true;
              this.$toast.center(res.Message);
              this.GetMewsScoreByTime();
            } else {
              this.isShow = false;
              this.$toast.center(res.Message);
            }
          })
          .catch(err => {
            this.$toast.center("当前请求有问题，请联系管理员！");
          });
      }
    },
    formatDate(time) {
      var date = new Date(parseInt(time.substring(6, 19)));
      return formatDate(date, "yyyy-MM-dd hh:mm").substring(5, 16);
    }
  },
  filters: {
    filterDates(time) {
      if (!time) {
        return "";
      } else {
        return time.replace("T", "  ").substring(5, 17);
      }
    }
  },
  components: {
    modal,
    lineEcharts,
    loading,
    noSearch,
    VueDatepickerLocal
  }
};
</script>
<style scoped>
.red {
  color: red;
}
.link-list a {
  font-size: 14px;
  display: inline-block;
  margin-right: 15px;
}
.link-list {
  padding-left: 45px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 50px;
}
.link-list + button {
  padding: 7px 15px;
  background-color: #11a7f3;
  color: #fff;
  vertical-align: middle;
  margin-right: 80px;
}

.link-list a:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: #ccc;
  margin-left: 10px;
  vertical-align: middle;
}
.link-list a:last-child:after {
  width: 0;
}

.link-list a.router-link-exact-active {
  color: #11a7f3;
}
.link-list a.router-link-active {
  color: #11a7f3;
}
.mewsScoreChartContent {
  height: calc(100vh - 230px);
}
.line {
  height: 100%;
  width: 85%;
  margin: auto;
}
.headerMod {
  height: 36px;
  line-height: 36px;
  margin-bottom: 15px;
  padding-top: 15px;
}
.headerMod > p {
  margin-right: 150px;
}
.content input {
  width: 85px;
  height: 32px;
  padding-left: 5px;
  border: 1px solid #ddd;
  margin-right: 15px;
}
.content > div {
  margin-top: 25px;
}
.content label {
  font-weight: normal;
}
.content span {
  margin-right: 25px;
}
.select {
  position: absolute;
  display: inline-block;
  margin-right: 25px;
  width: 150px;
  height: 34px;
  line-height: 34px;
  background: #fff;
  padding-left: 10px;
  border: 1px solid #e5e5e5;
}

.select p {
  color: #000;
  position: relative;
}

.select p:after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  background-image: url("../../../../static/images/unfold_arron.png");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: 12px;
  float: right;
}

.select p.up:after {
  background-image: url("../../../../static/images/up_arron.png");
}

.list-link {
  position: relative;
  z-index: 9999;
  display: none;
  border: 1px solid #eee;
  left: -10px;
  width: 150px;
  background-color: #fff;
  box-shadow: 2px 5px 5px #ccc;
}

.list-link li {
  text-align: center;
  cursor: pointer;
}

.list-link li:hover {
  background-color: #f6f6f6;
  border-bottom: 1px solid #ccc;
}

.newConent{
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .newConent{
    display: initial;
  }
}
@media screen and (max-width: 425px) {
  .link-list {
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 0;
  }
}
</style>
